$white: #fff;
$black: #020201;
$theme: #291600;
$theme-light: #ac7f58;
$theme-light-border: #ab7e56;
$font_size: 12px;
$nav_h: 44px;
$device_h: 100vh;
$device_w: 100vw;
$view_w: 20rem;
$base_index: 1;
.page_gpon {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 60px;
  background-color: $theme;
  header {
    &.navbar {
      margin-bottom: 0;
      color: $theme-light;
      background: $theme;
      p {
        &:first-child {
          font-size: 24px;
          margin-bottom: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
      .active {
        color: $white;
        background-color: $theme-light;
      }
      .blk {
        padding: 5px;
      }
    }
  }
  footer {
    &.navbar {
      line-height: 44px;
      background: $theme;
      p {
        font-size: 14px;
        margin-bottom: 0;
        color: $white;
      }
      button {
        font-size: 14px;
        line-height: 32px;
        margin-bottom: 0;
        color: $white;
        border-radius: 0;
      }
    }
  }
  article {
    section {
      &.extra img {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 1rem 1.5rem 0 1.5rem;
      }
      &.rule {
        .rulelist {
          font-size: .7rem;
          padding: .5rem 1rem;
          border-radius: .5rem;
          color: $theme-light;
        }
      }
      &.carousel {
        position: relative;
        z-index: $base_index+1;
        width: 100%;
        min-height: 11.5rem;
        border-top: 1px solid #1c0702;
        img {
          width: 100%;
          height: 18rem;
        }
        .carousel-indicators {
          li {
            margin: 0 .2rem;
          }
        }
      }
      &.info {
        margin: 0 auto 10px;
        padding: .5rem;
        border-bottom-right-radius: .4rem;
        border-bottom-left-radius: .4rem;
        background-color: #f7f7f7;
        font-size: .7rem;
        .goal {
          font-size: 1rem;
          color: $theme-light;
          text-decoration: underline;
        }
        .countdown {
          position: relative;
          height: 0;
          overflow: visible;
          right: 1rem;
          bottom: 2.75rem;
          strong {
            font-size: 14px;
            color: $theme-light;
          }
        }
        .ext {
          span {
            font-size: 1rem;
            text-decoration: underline;
            color: $theme-light;
          }
        }
        .go {
          font-size: .9rem;
          padding: .2rem .2rem 0 .2rem;
          background-color: #efe8e4;
          .icon-ss-right {
            font-size: 1rem;
            line-height: .9rem;
            position: relative;
            top: .15rem;
            right: .3rem;
            display: inline-block;
            float: right;
          }
        }
        .detail {
          .col-xs-3 {
            white-space: nowrap;
          }
        }
        .name {
          font-size: 1rem;
          font-weight: 400;
          line-height: 2rem;
        }
        .price {
          font-size: .7rem;
          font-weight: bold;
          color: $theme-light;
          strong {
            font-size: 1.4rem;
          }
        }
        .welfare {
          span {
            font-size: .7rem;
            font-weight: 400;
            width: 100%;
            padding: .2rem .4rem;
            text-align: center;
            color: $theme-light;
            border: 1px solid $theme-light;
            border-radius: .3rem;
            display: inline-block;
          }
        }
      }
      &.gohome {
        button {
          position: absolute;
          z-index: $base_index+2;
          top: 80px;
          left: 0;
          border-radius: 0 16px 16px 0;
          &.ng-hide-remove {
            transition: 0.3s linear opacity;
            opacity: 0;
          }
          &.ng-hide-remove-active {
            opacity: 1;
          }
          &.ng-hide-add {
            transition: 0.3s linear opacity;
            opacity: 1;
          }
          &.ng-hide-add-active {
            opacity: 0;
          }
        }
      }
      &.links {
        a {
          font-size: 1rem;
          color: $white !important;
          text-decoration: underline;
        }
      }
      &.list {
        .buttons {
          a {
            width: 75%;
            display: block;
            margin: 0 auto 10px;
          }
        }
        .onegpon {
          width: 95%;
          margin: .25rem auto;
          padding: .1rem 1.1rem;
          border: 1px solid $theme-light;
          border-radius: .75rem;
          background: #fff;
          span[class^='col'] {
            padding: 0;
          }
          .row {
            &:first-child {
              font-size: .8rem;
              line-height: 2.5rem;
              margin-bottom: .5rem;
              border-bottom: 1px solid #d6d6d6;
              .detail {
                text-decoration: underline;
                color: $theme-light;
              }
              i {
                font-size: 1rem;
              }
            }
            &:last-child {
              font-size: 1rem;
              line-height: 2rem;
              margin-bottom: .5rem;
            }
          }
          .portrait img {
            width: 2rem;
            height: 2rem;
            border-radius: 20%;
          }
        }
      }
      .boundary {
        margin: .8rem 0;
        white-space: nowrap;
        color: $theme-light;
        hr {
          position: relative;
          width: 100%;
          color: $theme-light;
          border-color: $theme-light;
          background: $theme-light;
        }
        .middle {
          display: block;
          position: relative;
          bottom: 2.1rem;
          height: 0;
          overflow: visible;
          .title {
            font-size: 1.2rem;
            width: 6rem;
            background-color: $theme;
          }
        }
        img {
          position: relative;
          bottom: .3rem;
          width: 2.5rem;
        }
        .blk {
          display: inline-block;
          height: 2.5rem;
        }
      }
      .joinboard {
        .addon {
          height: 0;
          overflow: visible;
          img {
            position: relative;
            z-index: $base_index+3;
            width: 2.5rem;
            top: -1rem;
            left: 9rem;
          }
        }
        img {
          border-radius: 5px;
        }
        p {
          &:first-child {
            display: block;
            width: 100%;
            text-align: center;
          }
          img {
            height: 3rem;
            width: 3rem;
          }
        }
      }
    }
  }
  .share_wrap {
    position: fixed;
    z-index: 6666;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .9);
    color: $white;
    .word {
      position: relative;
      font-size: 2rem;
      top: 6rem;
      padding: 2rem;
      text-align: center;
    }
    .glyphicon-share-alt {
      font-size: 1.5rem;
      padding: .5rem;
    }
    span {
      font-size: 1.1rem;
      position: relative;
      top: .25rem;
      display: inline-block;
    }
  }
}
